{% extends 'base.html' %}
{% block title %}Brisbane Coupon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
{% endblock%}

{% block content %}
  <div id="dLayout">
    <div id="dSearch">
      <form method="get" action="">
      {{ search_form.q }}
      </form>
    </div> <!-- end dSearch-->
  </div> <!-- end dLayout-->
  
  <div id="dWrapper">
    <div id="main" role="main">
      <ul id="tiles" class="transitions-enabled infinite-scroll clearfix">
        {% if stores %}
        {% load thumbnail %}
        {% endif %}
        {% for s in stores %}
        <li>
          <div id="dSmBoxIn">
            <span id="dStore2" >
              <span class="cSClass"><a href="{{ s.category.url }}">{{ s.category.name }}</a></span>
              <a href="{{ s.url }}" target="_blank">{{ s.name }}</a>
            </span>
          </div>
          <div id="dLineBg" class="cBg0">{{s.representative|safe }}</div>
          <div class="cPhoto">
            {% thumbnail s.thumbnail "270x200" as im %}
            <a href="{{ s.url }}" target="_blank"><img src="{{ im.url }}" /></a>
            {% endthumbnail %}
          </div>
          {% for e in s.get_aevents %}
          <div id="dLineBg" class="cBg0">
            <span class="cEventin">EVENT</span>
            <span class="cvEDescription">
              <a href="{{ e.url }}" target="_blank">{{ e.name }}</a> 
            </span>
          </div>
          {% empty %}
          <div id="dLineBg" class="cBg0">
            <span class="cEventin">EVENT</span>
            <span class="cvEDescription">
              <a href="{{ e.url }}" target="_blank">이벤트가 없습니다.</a> 
            </span>
          </div>
          {% endfor %}
          
          {% if s.addr %}
          <div id="dAddress">
            <a href="{{ s.url }}" target="_blank">{{ s.addr }}</a>
          </div>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div> <!-- end main-->
  
  
    
  </div> <!-- end dWrapper-->
  
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/jquery.wookmark.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/mosaic.1.0.1.js"></script>
<script type="text/javascript">

var handler = null;

// Prepare layout options.
var options = {
  autoResize: true, // This will auto-update the layout when the browser window is resized.
  container: $('#main'), // Optional, used for some extra CSS styling
  offset: 20, // Optional, the distance between grid items
  itemWidth: 300 // Optional, the width of a grid item
};

$(document).ready(new function() {
      $('.bar').mosaic({
          animation: 'slide'
      });
      // Clear our previous layout handler.
      if(handler) handler.wookmarkClear();
          
      // Create a new layout handler.
      handler = $('#tiles li');
      handler.wookmark(options);
});
</script>
  
{% endblock %}
